<script setup lang="ts">
import { computed } from 'vue';
import { App } from 'ant-design-vue';
import { useSect } from '../../../composables';
import { EVENTS, GameKernel } from '../../../game';
import SectInfo from './sect-info.vue';
import type { SectScriptureListItem } from '../../../game/model/sect/type';

const emit = defineEmits<{
  (e: 'change-scene', id: string): void;
}>();

const { modal } = App.useApp();

const { state: sectState } = useSect();

const currentSectInfo = computed(() => {
  return sectState.value.sectList.find(
    (item) => item.config.id === sectState.value.currentSect
  );
});

const bookList = computed(() => {
  return sectState.value.sectScriptureList;
});

function onBackClick() {
  emit('change-scene', 'sect-main');
}

function onExchangeClick(item: SectScriptureListItem) {
  modal.confirm({
    title: '兑换',
    content: `确定要兑换 [${item.config.reward.name}] 吗?`,
    okText: '确定',
    cancelText: '取消',
    centered: true,
    onOk: () => {
      GameKernel.inst.bus.emit(EVENTS.SECT_EXCHANGE_SCRIPTURE_ITEM, item);
    },
  });
}
</script>

<template>
  <div v-if="currentSectInfo" class="w-full h-full flex flex-col">
    <div class="flex-none py-2 text-lg font-bold text-center relative">
      <div class="absolute left-2 top-1/2 transform -translate-y-1/2">
        <a-button @click="onBackClick">返回</a-button>
      </div>
      <div>{{ currentSectInfo.config.name }} - 藏书阁</div>
    </div>
    <div class="flex-none border-0 border-t border-solid border-border p-2">
      <sect-info></sect-info>
    </div>
    <div class="flex-1 overflow-auto p-2 flex flex-col gap-2">
      <a-card
        v-for="(item, index) in bookList"
        :key="index"
        size="small"
        class="relative"
      >
        <div class="font-bold text-base">{{ item.config.reward.name }}</div>
        <div class="text-gray-300">
          <div>兑换条件:</div>
          <div class="flex-1 flex flex-col">
            <div>- 宗门贡献：{{ item.config.contribution }}</div>
            <div
              v-for="(progress, index) in item.exchangeConditionProgress"
              :key="index"
            >
              - {{ progress.description }}
            </div>
          </div>
        </div>
        <div class="absolute top-1/2 transform -translate-y-1/2 right-3">
          <a-button :disabled="!item.canReceive" @click="onExchangeClick(item)"
            >兑换</a-button
          >
        </div>
      </a-card>
    </div>
  </div>
</template>
